<template>
  <div class="common-table">
    <div class="table-item">
      <formItem title="名称">
        <template v-slot:rightText>
          <span>{{ formObj.title }}</span>
        </template>
      </formItem>
      <formItem title="位置">
        <template v-slot:rightText>
          <span>{{ formObj.landLocation }}</span>
        </template>
      </formItem>
      <formItem title="面积">
        <template v-slot:rightText>
          <span>{{ formObj.landArea }}</span>
        </template>
      </formItem>
    </div>
    <div class="table-item">
      <formItem title="区镇">
        <template v-slot:rightText>
          <span>{{ formObj.town }}</span>
        </template>
      </formItem>
      <formItem title="类型">
        <template v-slot:rightText>
          <span>{{ formObj.type }}</span>
        </template>
      </formItem>
      <formItem title="用途">
        <template v-slot:rightText>
          <span>{{ formObj.class }}</span>
        </template>
      </formItem>
    </div>
    <div class="progress-table-header table-2">
      <span>工程派工单</span>
    </div>
    <div class="table-item">
      <formItem title="工程名称">
        <template v-slot:right>
          <el-input v-model="formObj.name" placeholder="请输入名称" type="text"/>
        </template>
      </formItem>
      <formItem title="施工单位">
        <template v-slot:right>
          <el-select v-model="formObj.company" popper-class="big-screnn-popper" placeholder="请选择施工单位">
            <el-option
                v-for="item in companyOption"
                :key="item.value"
                :label="item.value"
                :value="item.value"
            />
          </el-select>
        </template>
      </formItem>
      <formItem title="编号">
        <template v-slot:right>
          <el-input v-model="formObj.number" placeholder="请输入编号" type="text"/>
        </template>
      </formItem>
    </div>
    <div class="table-item">
      <formItem title="派工日期">
        <template v-slot:right>
          <el-date-picker
              v-model="formObj.workTime"
              type="date"
              placeholder="选择日期"
              format="YYYY年MM月DD日"
              value-format="YYYY年MM月DD日"
          />
        </template>
      </formItem>
      <formItem title="完成日期">
        <template v-slot:right>
          <el-date-picker
              v-model="formObj.finishTime"
              type="date"
              placeholder="选择日期"
              format="YYYY年MM月DD日"
              value-format="YYYY年MM月DD日"
          />
        </template>
      </formItem>
      <formItem title="平整进度">
        <template v-slot:right>
          <el-select :class="selectClass" v-model="formObj.process" popper-class="big-screnn-popper" placeholder="请选择">
            <el-option
                v-for="item in useOption"
                :key="item.value"
                :label="item.value"
                :value="item.value"
            />
          </el-select>
        </template>
      </formItem>
      <!-- 为了保证space-between样式能完整生效，空的formitem需要加一个div放这里即可 -->
      <div class="empty-form-item"></div>
    </div>
    <div class="table-item">
      <div class="table-full-text">
        <div class="left">
          <span>施工内容及要求</span>
        </div>
        <div class="right">
          <el-input
              v-model="formObj.content"
              :rows="5"
              type="textarea"
              placeholder="Please input"
              style="color: #e9e9e9"
          />
        </div>
      </div>
    </div>
    <div class="table-item">
      <formItem title="临时派单文件">
        <template v-slot:rightFull>
          <el-button type="primary" @click="createFile">生成文件*</el-button>
          <el-button type="primary" @click="download">下载</el-button>
          <el-button type="primary" @click="preview">预览</el-button>
        </template>
      </formItem>
    </div>
    <div class="table-item" style="display: none">
      <div class="table-full-text">
        <div class="left">
          <span>勘探记录</span>
        </div>
        <div class="right">
          <el-input
              v-model="formObj.record"
              :rows="2"
              type="textarea"
              placeholder="Please input"
          />
        </div>
      </div>
    </div>
    <div class="table-item">
      <div class="table-full-text">
        <div class="left">
          <span>派单文件</span>
        </div>
        <div class="right">
          <div class="red-line">
            <div class="red-line-text" v-if="formObj.fileName !== ''">
              <el-input v-model="formObj.fileName" placeholder="请输入名称" type="text"/>
            </div>
            <el-upload
                action='api/upload/report'
                method="post"
                :http-request="PassUrl"
                style="width: 10%"
                :show-file-list="false"
            >
              <el-button type="primary">上传</el-button>
            </el-upload>
            <div>
              <el-button type="primary" @click="deleteWord">取消上传</el-button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import {reactive, defineComponent, getCurrentInstance, onMounted, watch, ref, computed} from 'vue'
import formItem from "@/components/commonFomItem/index.vue";
import {useRouter} from "vue-router";
import {ElNotification} from "element-plus";
import Data from "../../../public/config/data.json";

export default defineComponent({
  components: {formItem},
  props: ['confirmState', 'index', 'PassState','userName'],
  emits: ['receiveStateId'],
  setup(props, context) {
    const userType = localStorage.getItem("userType");
    const loginName = localStorage.getItem("loginName");
    //获取当前时间
    const getCurrentTime = () => {
      let date = new Date();
      //年
      let year = date.getFullYear().toString();
      //月份是从0月开始获取的，所以要+1;
      let month = ''
      if ((date.getMonth() + 1) < 10) {
        month = '0' + (date.getMonth() + 1).toString()
      } else {
        month = (date.getMonth() + 1).toString()
      }
      //日
      let day = date.getDate().toString();
      //时
      let hour = date.getHours().toString();


      return year + '年' + month + '月' + day + '日' + hour +'时'
    }
    const useOption = reactive(Data).landProcess
    const formObj = reactive({
      landLocation: '',
      landArea: '',
      type: '',
      town: '',
      class: '',
      title: '',

      name: '',
      company: '',
      url: '',
      number: '',
      workTime: '',
      finishTime: '',
      content: '',
      record: '',
      process: '',
      data: '',
      fileName: '',
      filePath: ''
    })
    const router = useRouter();
    const companyOption = reactive(Data).landCompany
    const cityOption = reactive(Data).selectTown
    const selectClass = computed(() => {
      let defaultClass = ''
      switch (formObj.process) {
        case '完成':
          defaultClass = 'red'
          break;
        case '进场施工中':
          defaultClass = 'orange'
          break;
        case '未进场':
          defaultClass = 'orange'
          break;
        case '土地不做平整':
          defaultClass = 'blue'
          break;
        default:
          break;
      }
      return `customer-select-color${defaultClass}`
    })
    //浏览内容
    const preview = () => {
      if (formObj.filePath === '') {
        ElNotification({
          title: '预览文件',
          message: "文件地址有问题，请检查文件",
          type: 'warning',
          position: 'top-left',
          offset: 300,
        })
      } else {
        // resolve新窗口打开
        const newPage = router.resolve({
          path: '/preview',  // 跳转的页面路由
          query: { // 要传的参数
            url: formObj.filePath,
            index: props.index
          }
        })
        window.open(newPage.href, '_blank') // 打开新的窗口(跳转路径，跳转类型)
      }
    }

    //下载文件
    const download = () => {
      appContext.config.globalProperties.axios({
        url: `api/downloadWord`,
        method: 'post',
        data: formObj,
        transformRequest: [function () {
          let oMyForm = new FormData();
          oMyForm.append("landId", props.index);
          oMyForm.append("path", formObj.filePath);
          return oMyForm;
        }],
        responseType: "blob",
      }).then((response) => {
        let blob = new Blob([response.data], {type: "application/msword;"}); // 为blob设置文件类型，这里以.xlsx为例
        let url = window.URL.createObjectURL(blob); // 创建一个临时的url指向blob对象
        let a = document.createElement("a");
        a.href = url;
        a.download = formObj.name+"土地平整";
        a.click();
        // 释放这个临时的对象url
        window.URL.revokeObjectURL(url);
      }).catch(() => {
        ElNotification({
          title: '下载文件',
          message: "文件未生成,请重新生成",
          type: 'warning',
          position: 'top-left',
          offset: 300,
        })
      })
    }

    //删除文件
    const deleteWord = () => {
      if (formObj.fileName === '' || formObj.url === '') {
        ElNotification({
          title: '删除文件',
          message: "文件未上传，请上传文件",
          type: 'warning',
          position: 'top-left',
          offset: 300,
        })
      } else {
        appContext.config.globalProperties.axios({
          url: `api/delete/word`,
          method: 'post',
          data: formObj,
          transformRequest: [function () {
            let oMyForm = new FormData();
            oMyForm.append("path", formObj.url);
            oMyForm.append("name", formObj.fileName);
            return oMyForm;
          }]
        }).then(() => {
          formObj.url = ''
          formObj.fileName=''
          ElNotification({
            title: '删除文件',
            message: "删除成功",
            type: 'success',
            position: 'top-left',
            offset: 300,
          })
        })
      }
    }

    //传送url
    const PassUrl = (Option) => {
      appContext.config.globalProperties.axios({
        url: `api/upload/explore`,
        method: 'post',
        data: formObj,
        transformRequest: [function () {
          let oMyForm = new FormData();
          oMyForm.append("file", Option.file);
          oMyForm.append("landId", props.index);
          oMyForm.append("infoDate", getCurrentTime());
          oMyForm.append("userType",userType);
          oMyForm.append("content", loginName +"于"+getCurrentTime()+"，在"+formObj.title+"地块土地平整阶段上传了");
          return oMyForm;
        }]
      }).then((response) => {
        formObj.url = response.data
        formObj.fileName = Option.file.name
        ElNotification({
          title: '上传文件',
          message: "上传成功",
          type: 'success',
          position: 'top-left',
          offset: 300,
        })
      })
    }
    //确定键
    watch(() => props.confirmState, () => {
      pushData()
    })
    const pushData = () => {
      appContext.config.globalProperties.axios({
        url: `api/update/explore`,
        method: 'post',
        data: formObj,
        transformRequest: [function () {
          let oMyForm = new FormData();
          oMyForm.append("landId", props.index);
          oMyForm.append("fileUrl", formObj.url);
          oMyForm.append("name", formObj.name);
          oMyForm.append("company", formObj.company);
          oMyForm.append("number", formObj.number);
          oMyForm.append("workTime", formObj.workTime);
          oMyForm.append("finishTime", formObj.finishTime);
          oMyForm.append("content", formObj.content);
          oMyForm.append("record", formObj.record);
          oMyForm.append("process", formObj.process);
          oMyForm.append("data", formObj.data);
          oMyForm.append("filePath", formObj.filePath);
          oMyForm.append("fileName", formObj.fileName);
          return oMyForm;
        }]
      }).then(()=>{
        ElNotification({
          title: '修改数据',
          message: "修改成功",
          type: 'success',
          position: 'top-left',
          offset: 300,
        })
      })

      appContext.config.globalProperties.axios({
        url: `api/create/fileStore`,
        method: 'post',
        data: formObj,
        transformRequest: [function () {
          let oMyForm = new FormData();
          oMyForm.append("landId", props.index);
          oMyForm.append("landName", formObj.title);
          oMyForm.append("landProcess", formObj.process);
          oMyForm.append("land", formObj.landLocation);
          oMyForm.append("town", formObj.town);
          oMyForm.append("area", formObj.landArea);
          return oMyForm;
        }]
      })
    }

    //创建文件
    const createFile = () => {
      appContext.config.globalProperties.axios({
        url: `api/create/explore`,
        method: 'post',
        data: formObj,
        transformRequest: [function () {
          let oMyForm = new FormData();
          oMyForm.append("fileName", formObj.name);
          oMyForm.append("number", formObj.number);
          oMyForm.append("area", formObj.landArea);
          oMyForm.append("location", formObj.landLocation);
          oMyForm.append("workTime", formObj.workTime);
          oMyForm.append("company", formObj.company);
          oMyForm.append("finishTime", formObj.finishTime);
          oMyForm.append("content", formObj.content);
          oMyForm.append("landId", props.index);
          return oMyForm;
        }]
      }).then((response) => {
        formObj.filePath = response.data
        ElNotification({
          title: '生成文件',
          message: "创建成功",
          type: 'success',
          position: 'top-left',
          offset: 300,
        })
      })
    }

    //通过键
    watch(() => props.PassState, () => {
      passData()
    })
    const passData = () => {
      appContext.config.globalProperties.axios({
        url: `api/pass/explore/1`,
        method: 'post',
        data: formObj,
        transformRequest: [function () {
          let oMyForm = new FormData();
          oMyForm.append("landId", props.index);
          oMyForm.append("fileUrl", formObj.url);
          oMyForm.append("name", formObj.name);
          oMyForm.append("company", formObj.company);
          oMyForm.append("number", formObj.number);
          oMyForm.append("workTime", formObj.workTime);
          oMyForm.append("finishTime", formObj.finishTime);
          oMyForm.append("content", formObj.content);
          oMyForm.append("record", formObj.record);
          oMyForm.append("process", formObj.process);
          oMyForm.append("data", formObj.data);
          oMyForm.append("filePath", formObj.filePath);
          oMyForm.append("fileName", formObj.fileName);
          return oMyForm;
        }]
      })

      appContext.config.globalProperties.axios({
        url: `api/create/fileStore`,
        method: 'post',
        data: formObj,
        transformRequest: [function () {
          let oMyForm = new FormData();
          oMyForm.append("landId", props.index);
          oMyForm.append("landName", formObj.title);
          oMyForm.append("landProcess", formObj.process);
          oMyForm.append("land", formObj.landLocation);
          oMyForm.append("town", formObj.town);
          oMyForm.append("area", formObj.landArea);
          return oMyForm;
        }]
      })
    }

    //初始化土地平整数据
    const {appContext} = getCurrentInstance();
    onMounted(() => {
      appContext.config.globalProperties.axios.post(`api/landSearch/${props.index}`).then((response) => {
        response.data.forEach(item => {
          formObj.class = item.landType
          formObj.title = item.bz
          formObj.town = item.town
          formObj.landLocation = item.landLoc
          formObj.landArea = item.landArea
          formObj.type = item.type
          let data = new Date()
          let year = data.getFullYear().toString()
          for (let i = 0; i < cityOption.length; i++) {
            if (formObj.town === cityOption[i].value) {
              formObj.number = year + '02' + '0' +(i + 1).toString()
            }
          }
          if(props.index <10)
          {
            formObj.number =  formObj.number + '00'+props.index
          }else if(props.index > 99){
            formObj.number = formObj.number  +props.index
          }else {
            formObj.number = formObj.number  + '0'+props.index
          }
        })
      })
    })
    onMounted(() => {
      appContext.config.globalProperties.axios.post(`api/search/explore/${props.index}`).then((response) => {
        response.data.forEach(item => {
          formObj.name = item.name
          formObj.company = item.company
          formObj.number = item.number
          formObj.workTime = item.workTime
          formObj.finishTime = item.finishTime
          formObj.content = item.content
          formObj.record = item.record
          formObj.process = item.process
          formObj.data = item.data
          formObj.url = item.fileUrl
          formObj.filePath = item.filePath
          formObj.fileName = item.fileName
        })
      })
    })

    return {
      useOption,
      formObj,
      pushData,
      passData,
      createFile,
      download,
      preview,
      PassUrl,
      deleteWord,
      getCurrentTime,
      companyOption,
      selectClass
    }
  }
})

</script>


<style scoped lang="scss">
.progress-table {
  .progress-table-header {
    font-size: 16px;
    color: rgba(240, 245, 255, 0.95);
    margin: 18px 0;
    text-align: center;

    &.table-2 {
      margin-bottom: 24px;
    }
  }
}

.common-table {
  .table-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;

    .table-full-text {
      display: flex;
      width: 100%;
      align-items: center;

      .left {
        color: rgba(240, 245, 255, 0.95);
        padding-right: 10px;
        width: 61px;
      }

      .right {
        flex: 1;

        .el-input__inner {
          color: #e9e9e9;
        }

        .el-textarea {
          color: #e9e9e9;
          --el-input-text-color: #edffff;
        }

        .red-line {
          display: flex;
          align-items: center;

          .red-line-text {
            padding-right: 12px;
          }
        }
      }
    }
    .common-form-item{
      .customer-select-colororange {
        .el-input__inner {
          color: #F7A95D;
        }
      }
      .customer-select-colorred {
        .el-input__inner {
          color:red;
        }
      }
      .customer-select-colorblue {
        .el-input__inner {
          color:blue;
        }
      }
    }
  }

  .empty-form-item {
    width: 280px;
  }

  .tips-text {
    margin-left: 62px;
    margin-top: -16px;
  }

  .table-item-input-btn {
    position: relative;

    .float-btn {
      position: absolute;
      right: 2px;
      top: 0;
    }
  }
}

.table-item-flat {
  display: flex;
  align-items: center;

  .table-item-block {
    width: 18px;
    height: 0
  }

  .delete{
    margin-left: 15px;
  }
}
</style>
